<template>
  <div class="body">
    <MyHeader></MyHeader>
    <TimeStatus></TimeStatus>
    <div class="canvas mt20 ml20">
      <canvas ref="canvas" id="cvs" :width="canvas_width" height="600">
      </canvas>
    </div>
    <div class="mt20">
      <DataWatch></DataWatch>
    </div>
    <div class="foot_title">
      <router-link to="/home/over-view">{{
        system_info.sign_name
      }}</router-link>
    </div>
  </div>
</template>
<script setup>
import MyHeader from "../components/MyHeader.vue";
import TimeStatus from "../components/TimeStatus.vue";
import DataWatch from "../components/DataWatch.vue";
import ws from "../utils/socket";
import httpApis from "../http/index";
import cvs from "../utils/canvas";
import { onMounted } from "vue";
import { ref } from "vue";
//获取系统时间
let datetime = ref("");
function getTime() {
  let date = new Date();
  datetime.value = date.toLocaleString();
}
setInterval(getTime, 1000);
//////////////////
const canvas = ref(); //定义画布
let img = new Image(); //img图片 模拟网关
img.src = "ic.png";
const net_list = ref([]); //网关列表
const net_status = ref([]); //网关连接状态
const net_status_xy = ref([]); //网关坐标
console.log(ws);
//设置画布宽度
let canvas_width = null;
canvas_width = Math.floor(document.body.clientWidth * 0.75);
let system_info = ref({});
onMounted(() => {
  const ctx = canvas.value.getContext("2d");
  //图片加载完之后绘制
  img.onload = function () {
    netInfo(canvas_width, ctx);
    netXy(ctx);
  };
  if (localStorage.getItem("system_info") !== null) {
    system_info.value = JSON.parse(localStorage.getItem("system_info"));
  }
});
//绘制服务器信息
function netInfo(n, ctx) {
  httpApis.UserApi.list().then((res) => {
    net_list.value = res.data;
    let y = ref("");
    net_list.value.forEach((v) => {
      let net_width = n / v.count;
      if (v.layer == 1) {
        v.list.forEach((vi, ii) => {
          cvs.addimgS(ctx, vi.ip, vi.title, img, ii * net_width, 60);
        });
      } else if (v.layer == 2) {
        v.list.forEach((vi, ii) => {
          cvs.addimgM(ctx, vi.ip, vi.title, img, ii * net_width, 200);
        });
      } else if (v.layer == 4) {
        v.list.forEach((vi, ii) => {
          cvs.addimgE(ctx, vi.ip, vi.title, img, ii * net_width, 500);
        });
      }
    });
  });
}
//获取服务器坐标（根据下标计算）
function netXy(ctx) {
  httpApis.UserApi.list().then((res) => {
    res.data.forEach((v) => {
      if (v.layer == 1) {
        v.list.forEach((vv, ii) => {
          vv.xy = `${(canvas_width / v.count) * ii},60`;
        });
        net_status_xy.value = v.list;
      }
      if (v.layer == 2) {
        v.list.forEach((vv, ii) => {
          vv.xy = `${(canvas_width / v.count) * ii},200`;
          net_status_xy.value.push(v.list[ii]);
        });
      }
    });
    netStatus(ctx);
  });
}
//绘制网关连接状态
function netStatus(ctx) {
  httpApis.UserApi.status().then((res) => {
    net_status.value = res.data;
    console.log(net_status_xy.value);
    net_status.value.forEach((v) => {
      let xa, xb, ya, yb;
      net_status_xy.value.forEach((vv) => {
        if (v.start_id == vv.id) {
          xa = Number(vv.xy.split(",")[0]) + 45;
          ya = Number(vv.xy.split(",")[1]) - 10;
        }
      });
      net_status_xy.value.forEach((vv) => {
        if (v.end_id == vv.id) {
          xb = Number(vv.xy.split(",")[0]) + 50;
          yb = Number(vv.xy.split(",")[1]) + 50;
        }
      });
      console.log(xa, xb, ya, yb);
      cvs.drawArrow("dash", ctx, xa, ya, xb, yb, "#fff000");
    });
  });
}
</script>

<style lang="scss" scoped>
body,
html {
  margin: 0px;
  padding: 0px;
}
.body {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-image: linear-gradient(#2e3458, #1f4ce7, #2e3458);
  .canvas {
    background-image: url("../assets/img/bg03.png");
    background-size: cover;
    width: 80%;
    height: 600px;
    canvas {
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
  .foot_title {
    user-select: none;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    a {
      text-decoration: none;
      font-size: 15px;
      color: #d2ddf9;
    }
  }
}
</style>
